<template>
	<div class="orderfirst">
		<div class="orderfirst-top">
			<h2>全部订单</h2>
		</div>
		<div class="orderfirst-midden">
			<ul>
				<li v-for="item in list" :key="item.id">
					{{item.name}}
				</li>
			</ul>
		</div>
		<div class="orderfirst-bottom">
			<!-- <img src="../../../../public/order/orderlist-1.png" />
			<p>这里什么也没有</p>
			<label>继续去探索未知的新世纪吧</label> -->
			<ul>
				<li>
					<img src="../../../../public/fun/img-10.webp"/>
					<article>游玩主题:感受冰天雪地不一样的风格</article>
					<p>出发地点:广州</p>
					<label>订单状态:已支付</label>
					<strong>已支付:288元</strong>
				</li>
			</ul>
			<ol>
				<li>
					<img src="../../../assets/prituce/spike-list04.jpg"/>
					<article>游玩主题:体验秋色美景。</article>
					<p>出发地点:贵州</p>
					<label>订单状态:未支付</label>
					<strong>未支付:168元</strong>
				</li>
			</ol>
		</div>
	</div>
</template>

<script>
	export default{
		name:'OrderFirst',
		data(){
			return{
				list:[
					{id:1,name:"全部"},
					{id:2,name:"待付款"},
					{id:3,name:"已付款"},
					{id:4,name:"待评价"},
					{id:5,name:"退款/售后"}
				]
			}
		}
	}
</script>

<style scoped>
	.orderfirst-top{
		width: 100%;
		height: 1.5rem;
		display: flex;
		align-items: center;
		justify-content: space-around
	}
	.orderfirst-top h2{
		font-size: 0.5rem;
		font-weight: bold;
	}
	.orderfirst-midden{
		width: 100%;
		height: 1.7rem;
	}
	.orderfirst-midden ul{
		width: 90%;
		height: 1rem;
		margin: 0 auto;
		text-align: center;
	}
	.orderfirst-midden ul li{
		float: left;
		width: 19%;
		padding-top: 0.6rem;
		font-size: 0.35rem;
	}
	.orderfirst-bottom{
		width: 100%;
		height: 9rem;
	}
/* 	.orderfirst-bottom img{
		width: 5rem;
		height: 5rem;
		margin-left: 3rem;
		margin-top: 1.5rem;
	}
	.orderfirst-bottom p{
		display: block;
		font-size: 0.4rem;
		padding-left: 4rem;
		padding-top: 0.7rem;
	}
	.orderfirst-bottom label{
		display: block;
		font-size: 0.4rem;
		padding-left: 3rem;
		padding-top: 0.1rem;
	} */
	.orderfirst-bottom ul{
		width: 100%;
		position: relative;
		background-color: gainsboro;
	}
	.orderfirst-bottom ul li{
		width: 100%;
		height: 3rem;
	}
	.orderfirst-bottom ul li img{
		width: 30%;
		height: 2rem;
		position: absolute;
		top: 0.1rem;
		left: 0.2rem;
	}
	.orderfirst-bottom ul li article{
		position: absolute;
		top: 2.35rem;
		left: 0.1rem;
		font-size: 0.3rem;
	}
	.orderfirst-bottom ul li label{
		position: absolute;
		top: 1.2rem;
		right: 0.3rem;
		font-size: 0.3rem;
	}
	.orderfirst-bottom ul li p{
		position: absolute;
		top: 0.5rem;
		right: 0.3rem;
		font-size: 0.3rem;
	}
	.orderfirst-bottom ul li strong{
		position: absolute;
		position: absolute;
		top: 1.8rem;
		right: 0.3rem;
		font-size: 0.3rem;
	}
	
	
	.orderfirst-bottom ol{
		margin-top: 0.2rem;
		width: 100%;
		position: relative;
		background-color: gainsboro;
	}
	.orderfirst-bottom ol li{
		width: 100%;
		height: 3rem;
	}
	.orderfirst-bottom ol li img{
		width: 30%;
		height: 2rem;
		position: absolute;
		top: 0.1rem;
		left: 0.2rem;
	}
	.orderfirst-bottom ol li article{
		position: absolute;
		top: 2.35rem;
		left: 0.1rem;
		font-size: 0.3rem;
	}
	.orderfirst-bottom ol li label{
		position: absolute;
		top: 1.2rem;
		right: 0.3rem;
		font-size: 0.3rem;
	}
	.orderfirst-bottom ol li p{
		position: absolute;
		top: 0.5rem;
		right: 0.3rem;
		font-size: 0.3rem;
	}
	.orderfirst-bottom ol li strong{
		position: absolute;
		position: absolute;
		top: 1.8rem;
		right: 0.3rem;
		font-size: 0.3rem;
	}
</style>
